<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<html>
<head>
<title>商品管理</title>
<script src="${ctx}/static/js/base.js" type="text/javascript"></script>
<script>
  var categoryList = [];
  var cidFromList = ["${cid}"];
  var cidFromProductDetail = [];
  <c:forEach items="${product.link}" var="link">
    cidFromProductDetail.push("${link.category.id}");
  </c:forEach>

  $(document).ready(function() {
      //聚焦第一个输入框
      $("#product_title").focus();
      //为inputForm注册validate函数
      $("#inputForm").validate();

      Momo.syncAjax('查询', '${ctx}/member/shop/ajax-category-get-all', {},
          function(resp) {
            categoryList = resp.cids;
          });
      $('.select_l1').live('change', function() {
        var l1Id = $(this).val();
        var data = [];
        for (var i = 0; i < categoryList.length; i++) {
          if (l1Id == categoryList[i]['id']) {
            data = categoryList[i]['sub'];
            break;
          }
        }
        renderSelect($(this).parent().find('.select_l2'), data);
        $(this).parent().find('input[name=cid]').val($(this).val());
      });
      $('.select_l2').live('change', function() {
        var l2Id = $(this).val();
        var l1Id = $(this).parent().find('.select_l1').val();
        var data = [];
  outer:
        for (var i = 0; i < categoryList.length; i++) {
          if (l1Id == categoryList[i]['id']) {
            if (categoryList[i]['sub']) {
              for (var j = 0; j < categoryList[i]['sub'].length; j++) {
                if (l2Id == categoryList[i]['sub'][j]['id']) {
                  data = categoryList[i]['sub'][j]['sub'];
                  break;
                }
              }
            }
          }
        }
        renderSelect($(this).parent().find('.select_l3'), data);
        $(this).parent().find('input[name=cid]').val($(this).val());
      });
      $('.select_l3').live('change', function() {
        $(this).parent().find('input[name=cid]').val($(this).val());
      });
      $('#add_category').click(function() {
        renderCategory([0, 0, 0], $('#add_category_div'));
      });
      $('.remove_cid').live('click', function() {
        var cids = $('#inputForm').find('.cid');
        if (cids && cids.length > 1) {
          $(this).parents('.cid').remove();
        } else {
          alert('不能删除最后一个分类');
        }
      });

      renderSelect($('#cid_template .select_l1'), categoryList);
      renderCategoryList(cidFromProductDetail.length > 0 ? cidFromProductDetail : cidFromList);
  });
  function renderSelect(select, data) {
    select.empty();
    data = data || [];
    select.append($('<option>').val(0).text('--------请选择分类--------'));
    for (var i = 0; i < data.length; i++) {
      select.append($('<option>').val(data[i]['id']).text(data[i]['name']));
    }
  }
  function renderCategoryList(cids) {
    var div = $('#add_category_div');
    $.each(cids, function(index, cid) {
      var idList = getIdList(cid);
      renderCategory(idList, div);
    });
  }
  function renderCategory(idList, insertBeforeDiv) {
    var div = $('#cid_template').clone().attr('id', '').removeClass('hide');
    div.find('.select_l1').val(idList[0]);
    for (var i = 0; i < categoryList.length; i++) {
      if (idList[0] == categoryList[i]['id']) {
        renderSelect(div.find('.select_l2'), categoryList[i]['sub']);
        div.find('.select_l2').val(idList[1]);
        for (var j = 0; j < categoryList[i]['sub'].length; j++) {
          if (idList[1] == categoryList[i]['sub'][j]['id']) {
            renderSelect(div.find('.select_l3'), categoryList[i]['sub'][j]['sub']);
            div.find('.select_l3').val(idList[2]);
          }
        }
      }
    }
    div.find('input[name=cid]').val(idList[2] || idList[1] || idList[0]);
    div.insertBefore(insertBeforeDiv);
    return div;
  }
  function getIdList(cid) {
    var result = [0, 0, 0];
outer:
    for (var i = 0; i < categoryList.length; i++) {
      result[0] = categoryList[i]['id'];
      if (result[0] == cid) {
        break outer;
      }
      for (var j = 0; j < categoryList[i]['sub'].length; j++) {
        result[1] = categoryList[i]['sub'][j]['id'];
        if (result[1] == cid) {
          break outer;
        }
        for (var k = 0; k < categoryList[i]['sub'][j]['sub'].length; k++) {
          result[2] = categoryList[i]['sub'][j]['sub'][k]['id'];
          if (result[2] == cid) {
            break outer;
          }
          result[2] = 0;
        }
        result[1] = 0;
      }
      result[0] = 0;
    }
    return result;
  }
</script>
</head>

<body>
    <div id="cid_template" class="control-group hide cid">
      <label class="control-label">分类：</label>
        <div class="controls">
          <input type="hidden" name="cid" value="">
          <select class="select_l1"></select>
          <select class="select_l2"></select>
          <select class="select_l3"></select>
          <input type="button" class="btn remove_cid" value="删除"/> 
        </div>
    </div>
    <form id="inputForm" action="${ctx}/member/shop/product/${action}" method="post" class="form-horizontal">
        <input type="hidden" name="id" value="${product.id}"/>
        <input type="hidden" name="shop.id" value="${product.shop.id}"/>
        <fieldset>
            <legend><small>管理商品</small></legend>
            <div id="add_category_div" class="control-group">
                <label for="" class="control-label"></label>
                <div class="controls">
                    <button id="add_category" type="button">增加分类</button>
                </div>
            </div>
            <div class="control-group">
                <label for="product_title" class="control-label">名称:</label>
                <div class="controls">
                    <input type="text" id="product_title" name="title"  value="${product.title}" class="input-large required" minlength="3"/>
                </div>
            </div>
            <div class="control-group">
                <label for="product_desc" class="control-label">描述:</label>
                <div class="controls">
                    <textarea id="product_desc" name="desc" class="input-large" style="width:700px;height:250px;resize:none">${product.desc}</textarea>
                </div>
            </div>
            <div class="control-group">
                <label for="description" class="control-label">价格:</label>
                <div class="controls">
                    <input type="text" id="product_price" name="price" value="${product.price}" class="input-large required"/>
                </div>
            </div>
            <div class="control-group">
                <label for="images2" class="control-label">图片:</label>
                <div class="controls">
                <c:forEach items="${product.images}" var="image">
                    <div>
                        <input type="hidden" name="images" value="${image.id}" order="${image.order}"/>
                        <label>${image.path}</label>
                        <button type="button">删除</button><br>
                        <img src="/images/p/${image.path}"/>
                    </div>
                </c:forEach>
                <input type="file" id="add_image" name="images" class=""/>
                </div>
            </div>
            <div class="form-actions">
                <input id="submit_btn" class="btn btn-primary" type="submit" value="提交"/>&nbsp; 
                <input id="cancel_btn" class="btn" type="button" value="返回" onclick="history.back()"/>
            </div>
        </fieldset>
    </form>
</body>
</html>
